<template>
    <div style="background: #f5f5f5; height: 100vh">
      <div class="header">
        <div class="video_title">
          <van-icon name="arrow-left" class="icon" @click="goBack" />
          <p>我的成绩</p>
        </div>
        <div class="content_box1">
          <div class="content_box2">
            <div class="content_box3">
              <div class="content_box4">
                <span> {{ fraction }}<i>分</i> </span>
                <p>考试得分</p>
              </div>
            </div>
          </div>
        </div>
        <div style="text-align: center; color: #fff; margin-top: 8px">
          {{ subject }}
        </div>
        <div class="fout_conter">
          <img v-if="headPicture" :src="headPicture" alt="" />
          <img v-else src="@/assets/logo/logo.png" alt="" />
          <div>
            <span>{{ nickname }}</span>
            <p>{{ adminUserId }}</p>
          </div>
        </div>
      </div>
      <div class="stbox">
        <div class="stboxItem">
          <p>正确</p>
          <i style="color: #7ed321">{{ correct }}</i>
          <span>题</span>
        </div>
        <div class="stboxItem">
          <p>错误</p>
          <i style="color: #f33e34">{{ error }}</i>
          <span>题</span>
        </div>
        <div class="stboxItem">
          <p>未做</p>
          <i style="color: #999">{{ Unanswered }}</i>
          <span>题</span>
        </div>
      </div>
      <div class="footerButton">
        <div class="buttonBox">
          <van-button type="danger" block class="button" @click="goBack"
            >退出</van-button
          >
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import { getsubjectTitle } from "@/utils/auth.js";
  export default {
    computed: {
      ...mapGetters(["userinfor", "adminUserId", "nickname", "headPicture"]),
    },
    data() {
      return {
        Unanswered: this.$route.query.Unanswered,
        correct: this.$route.query.correct,
        error: this.$route.query.error,
        fraction: this.$route.query.fraction,
        commitData: this.$route.query.commitData,
        subject: getsubjectTitle(),
        usererror: this.$route.query.usererror,
      };
    },
    methods: {
      goBack() {
        this.$router.push("/study");
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .video_title {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #fff;
    height: 2.75rem;
  
    p {
      margin: 0;
      width: calc(100vw - 64px);
      display: flex;
      justify-content: center;
      font-size: 1.25rem;
    }
    .icon {
      font-size: 1.25rem;
    }
  }
  .header {
    height: 18.9rem;
    width: 100%;
    background: url("~@/assets/mobile/exam/cj.png") no-repeat;
    background-size: 100%;
    .content_box1 {
      display: flex;
      justify-content: center;
      height: 9.38rem;
      .content_box2 {
        width: 9.38rem;
        background: url("~@/assets/mobile/exam/hx.png") no-repeat;
        background-size: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .content_box3 {
          width: 8rem;
          height: 8rem;
          background-color: rgba(255, 255, 255, 0.19);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          .content_box4 {
            float: left;
            width: 7rem;
            height: 7rem;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.29);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            span {
              font-size: 1.875rem;
              i {
                font-size: 0.81rem;
              }
            }
            p {
              margin: 0;
              font-size: 0.81rem;
            }
          }
        }
      }
    }
    .fout_conter {
      margin-top: 1.09rem;
      height: 2.19rem;
      padding: 0 1.47rem;
      display: flex;
      img {
        margin-right: 8px;
        height: 100%;
      }
      div {
        color: #fff;
      }
    }
  }
  .stbox {
    margin: 0.75rem 0;
    height: 2.81rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .stboxItem {
      display: flex;
      font-size: 1rem;
      p {
        margin: 0;
        font-weight: 600;
        margin-right: 1.125rem;
      }
      span {
        color: #666;
      }
    }
  }
  .footerButton {
    height: calc(100vh - 2.81rem - 0.75rem - 0.75rem - 18.9rem);
    background-color: #fff;
    display: flex;
    align-items: flex-end;
    .buttonBox {
      padding: 0.75rem;
      display: flex;
      width: 100%;
      justify-content: space-between;
      .button {
        width: calc(50vw - 1.125rem);
        padding: 0;
      }
    }
  }
  </style>